<template>
  <div class="element" @click="selectElement">
    <button
      :class="[
        'px-4 py-2 rounded-md font-medium transition-colors',
        props.color === 'primary'
          ? 'bg-blue-500 text-white'
          : props.color === 'secondary'
            ? 'bg-gray-500 text-white'
            : props.color === 'success'
              ? 'bg-green-500 text-white'
              : props.color === 'danger'
                ? 'bg-red-500 text-white'
                : props.color === 'warning'
                  ? 'bg-yellow-500 text-white'
                  : props.color === 'info'
                    ? 'bg-sky-500 text-white'
                    : 'bg-blue-500 text-white',
      ]"
    >
      {{ props.text }}
    </button>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'

const props = defineComponent({
  props: {
    props: {
      type: Object,
      required: true,
      default: () => ({
        text: '',
        color: 'primary',
      }),
    },
  },
})

const emit = defineEmits(['update:props'])

// 选中当前元素
const selectElement = () => {
  // 这里可以实现选中元素的逻辑
  console.log('Selected element:', props)
}

// 更新属性
const updateProps = (newProps: any) => {
  emit('update:props', newProps)
}
</script>
